@import '../../colors.scss';

.header-wrapper {
    transition:
        margin-top 300ms 0ms cubic-bezier(0.4, 0, 0.6, 1),
        opacity 0s 300ms;
    @media print {
        display: none;
    }
}

.tabs-container {
    display: flex;
    .mdc-tab-indicator__content--underline {
        border: none;
    }
    .mat-mdc-tab-header-pagination {
        display: none !important;
    }
    .tabs .tab-title.active {
        opacity: 1 !important;
        @include adaptive-color('color', black, on-color(dark));
        @include adaptive-color('border-color', color(panel-dark), color(dark-1));
        @include adaptive-color('background-color', color(panel-dark), color(dark-2));
        @include adaptive-color-dark-only('border', none);
    }
    .tabs .tab-title:not(.active) {
        @include adaptive-color('border-color', color(panel-dark), color(dark-4));
    }
}

.scroll {
    overflow: auto;
    width: 95.5vw;
}

.tabs {
    .tab-title {
        // non-datatable tab names
        @include adaptive-color('color', black, white);
        font-size: 14px;
        text-decoration: none;
        display: flex;
        justify-content: space-around;

        &:hover,
        &:focus {
            // when the mouse is over a non-selected tab
            &:not(.active) {
                text-decoration: none;
                @include adaptive-color('color', black, color(dark-link));
                @include adaptive-color('opacity', 0.6, 0.8);
                @include adaptive-color('background-color', color(panel-light), color(dark-2));
                &:not(.add-tab) {
                    border-color: color(panel-dark);
                }
            }
        }

        // tab number for layer operations
        .tab-enumerator {
            @include adaptive-color-dark-only('color', color(dark-1));
            position: absolute;
            top: 4px;
            right: -4px;
            padding: 2px 4px;
            background: rgb(255, 255, 0);
            border-radius: 5px;
        }

        &.active {
            @include adaptive-color('background-color', color(panel-dark), lighten(color(dark), 1%));
            @include adaptive-color('color', color(tab-text-color), color(panel-dark));
            cursor: default;
        }
    }

    .add-tab {
        min-width: fit-content;
        .mat-icon {
            color: gray;
        }
        &:hover {
            @include adaptive-color('background-color', #f1f1f1, color(dark-2));
            border-color: #ddd #ddd #f1f1f1 #ddd;
            .mat-icon {
                // override mat icon color on hover
                @include adaptive-color('color', black, white);
            }
        }
    }
}

.tab-close {
    color: gray;
    text-align: right;
    cursor: pointer;
}
.icon-button-scale-down {
    transform: scale(0.75);
}

.new-tab {
    @include adaptive-color('background-color', color(light), color(dark-1));
    @include adaptive-color('color', on-color(light), on-color(dark));
    @include adaptive-color('border-color', color(panel-dark), color(dark-1));
    border-width: 1px;
    border-style: solid;
    height: 90%;
    display: block;
    overflow-y: scroll;
    box-sizing: border-box;
    position: absolute;
    padding: 5% 20%;

    .description {
        display: flex;
        flex-flow: column wrap;
        align-items: center;
    }

    .description div p {
        max-width: 75ch;
        font-size: 1.2em;
    }

    .logo {
        text-align: center;
        font-size: 1em;
        a {
            text-decoration: none;
            color: rgb(176, 26, 26);
            font-weight: 500;
        }
    }
}

.tab-enumerator-highlight {
    @include adaptive-color-dark-only('color', color(dark-1));
    padding: 2px 4px;
    background: rgb(255, 255, 0);
    border-radius: 5px;
}

.hide-select .mat-mdc-select-value {
    visibility: hidden !important;
}
.hide-select {
    .mat-mdc-select-value, .mat-mdc-select-arrow-wrapper {
        visibility: hidden !important;
    }
}

.mat-expansion-panel {
    @include adaptive-color('background-color', color(light), color(dark-2));
    @include adaptive-color-dark-only('color', on-color(dark-3));

    .mat-expansion-indicator::after {
        @include adaptive-color-dark-only('color', on-color(dark-3));
    }

    .mat-expansion-panel-header,
    button.mat-mdc-raised-button {
        // nested items inside parent expansion panel
        @include adaptive-color-dark-only('background-color', color(dark-2));
        @include adaptive-color-dark-only('color', on-color(dark-3));
    }

    .mat-expansion-panel-content {
        .mat-expansion-panel-header,
        .mat-mdc-raised-button:not([class*='mat-elevation-z']) {
            @include adaptive-color-dark-only('border-top', 1px solid #ffffff21);
        }
    }

    .mat-expansion-panel-header:hover:not([aria-disabled='true']):not(.mat-expanded) {
        @include adaptive-color-dark-only('background-color', color(dark-link));
    }

    .mat-expansion-panel-body {
        @include adaptive-color-dark-only('color', on-color(dark-3));
    }

    .mat-expansion-panel-body button:not(:disabled):hover {
        @include adaptive-color('background', color(cell-highlight-color), color(dark-link));
    }

    .mat-mdc-form-field, .mat-mdc-form-field:hover {
        &:not(.mat-form-field-disabled) {
            .mat-mdc-floating-label,
            .mat-mdc-select-arrow,
            .mat-mdc-select-value-text,
            .mat-mdc-input-element,
            .mat-mdc-form-field-icon-suffix .mat-mdc-button-base {
                @include adaptive-color-dark-only('color', on-color(dark));
            }
        }

        &.mat-form-field-disabled,
        .layerOpTable td.disabled {
            .mat-mdc-floating-label,
            .mat-mdc-select-arrow {
                @include adaptive-color-dark-only('color', darken(on-color(dark-1), 25%));
            }
        }
        &.mat-form-field-disabled .mdc-line-ripple::before {
            @include adaptive-color-dark-only('border-bottom-color', darken(on-color(dark-1), 25%));
        }
        &:not(.mat-form-field-disabled) .mdc-line-ripple::before {
            @include adaptive-color-dark-only('border-bottom-color', on-color(dark-3));
        }

        .mat-mdc-form-field-hint {
            @include adaptive-color-dark-only('color', on-color(dark));
        }
    }

    .mat-mdc-unelevated-button {
        &:not(:disabled) {
            @include adaptive-color-dark-only('background-color', color(dark-2));
            @include adaptive-color-dark-only('color', on-color(dark-2));
        }
        &:disabled {
            @include adaptive-color-dark-only('background-color', color(dark-1));
            @include adaptive-color-dark-only('border', color(dark-2) 2px solid);
            @include adaptive-color-dark-only('color', darken(on-color(dark-1), 50%));
        }
    }

    a {
        @include adaptive-color-dark-only('color', color(dark-link));
    }

    a:visited,
    a:active {
        @include adaptive-color-dark-only('color', color(dark-link-active));
    }
}

.headers-align .mat-expansion-panel-header-title,
.headers-align .mat-expansion-panel-header-description {
    @include adaptive-color('color', on-color(light), darken(on-color(dark), 10%));
    flex-basis: 0;
}

.headers-align .mat-expansion-panel-header-description {
    @include adaptive-color-dark-only('color', darken(on-color(dark), 15%));
    justify-content: space-between;
    align-items: center;
}

input[type='file'] {
    padding: 5px;
    margin: 5px;
    width: 300px;
    background-color: color(panel-light);
    border-radius: 0px;
    &:hover {
        background-color: color(panel-dark);
    }
}

// help button on new tab page
.help-links-container {
    display: flex;
    justify-content: center;
    margin-bottom: 1em;
    width: 100%;
    gap: 10px;

    button.mdc-button {
        @include adaptive-color-dark-only('background-color', color(dark-1));
        @include adaptive-color-dark-only('color', on-color(dark-3));
    }
}

// theme button on new tab page
.theme-select-container {
    .mat-mdc-select {
        position: absolute;
        margin-left: -85px;
        top: 20px;
    }
}

.header {
    text-align: right;
    right: 0;
    z-index: 10 !important;

    div {
        display: inline-block;
        cursor: pointer;
    }

    &.help-header {
        position: absolute;
    }

    .help-button {
        position: absolute;
        top: 10px;
        right: 15px;
        text-align: center;
        width: 4ex;
        height: 3ex;
        padding: 5px;
        z-index: 10;

        svg {
            @include adaptive-color-dark-only('fill', on-color(dark));
        }

        &:hover svg {
            @include adaptive-color-dark-only('fill', on-color(dark));
            fill: #505050;
        }
    }

    .help-dropdown-open {
        @include adaptive-color-dark-only('background', color(dark-3));
        @include adaptive-color-dark-only('border', solid color(dark-2) 1px);
        @include adaptive-color-dark-only('box-shadow', 1px 2px color(dark-2));
        @include adaptive-color-dark-only('z-index', 1);
        @include adaptive-color-dark-only('border-bottom', color(dark-3));
        @include adaptive-color-dark-only('color', color(dark-link));
        border-radius: 50% 50% 0 0;
        border: solid color(panel-dark) 1px;
        border-bottom: solid 1px white;
        background: white;

        svg {
            @include adaptive-color-dark-only('fill', on-color(dark));
            fill: #505050;
        }
    }

    .dropdown-container {
        @include adaptive-color-dark-only('background', color(dark-3));
        @include adaptive-color-dark-only('border-color', color(dark-3));
        @include adaptive-color-dark-only('box-shadow', 2px 1px 1px color(dark-2));
        @include adaptive-color-dark-only('color', color(dark-link));
        position: absolute;
        right: 16px;
        display: flex;
        justify-content: center;
        flex-flow: column;
        background: white;
        border-style: solid;
        border-color: #ddd;
        border-width: 1px 0 1px 1px;
        box-shadow: 2px 1px 1px #ddd;
        border-radius: 0 0 5px 5px;
        padding: 10px;
        top: 40px;
        z-index: 9;

        button {
            @include adaptive-color-dark-only('color', on-color(dark));
            border: none;
            background-color: transparent;
            text-align: right;
            padding-bottom: 5px;
            &:hover {
                text-decoration: underline;
                cursor: pointer;
            }
        }
    }

    .banner {
        background-color: color(primary);
        margin-bottom: 1em;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 15px;
        text-align: left;
        color: on-color(primary);
        font-size: 14px;
        font-family: Roboto, 'Helvetica Neue', sans-serif;
        cursor: initial;
        .bannerContent {
            padding-right: 15px;
        }
        .bannerLinks {
            display: flex;
            align-items: center;
            border-left: 2px solid #ffffffad;
            padding-left: 15px;
            cursor: initial;
        }
        a {
            display: inline;
            color: on-color(primary);
            text-decoration-color: on-color(primary);
        }
        a:hover,
        .helpIcon:hover {
            color: color(panel-dark);
            opacity: 0.8;
        }
    }
}

.button-group {
    display: flex;
    justify-content: center;
    padding: 0 24px;
    .mat-mdc-raised-button {
        width: 100%;
        margin: 0 6px 12px;
    }
}

.multi-column-container {
    padding: 0 24px;
}
.multi-column-container + .multi-column-container {
    margin-top: 20px;
}
.multi-column + .multi-column {
    margin-top: 16px;
}
.multi-column {
    display: flex;
    &:not(.left-align) {
        justify-content: center;
        align-items: center;
    }
    div.disabled {
        color: gray;
    }
    .mat-mdc-form-field {
        width: 100%;
    }
    .mat-mdc-raised-button {
        width: 100%;
    }
    .md-column {
        width: 40%;
    }
    .lg-column {
        width: 100%;
    }
    .spacer {
        width: 10%;
    }
    .sm-column {
        width: 20%;
    }
    .or-column {
        display: flex;
        width: 20%;
        font-size: 8pt;
        justify-content: center;
        align-items: center;
    }
}

.feature-row {
    margin-bottom: 4px;
    &:hover {
        @include adaptive-color('background-color', darken(white, 5%), color(dark-3));
    }
    .mat-mdc-checkbox .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background {
        background-color: color(primary) !important;
        border-color: color(primary) !important;
    }
    .mat-mdc-checkbox .mdc-checkbox__native-control:enabled:not(:checked)~.mdc-checkbox__background {
        .theme-override-dark & {
            border-color: color(body) !important;
        }
    }
    .mat-mdc-checkbox.adaptive-checkbox .mdc-form-field {
        @include adaptive-color('color', color(dark-1), color(body));
    }
}
.feature-row + .feature-row {
    margin: 0 !important;
}

.align-center {
    display: flex;
    align-items: center;
}
.section {
    padding-bottom: 12px;
}
.capitalize {
    text-transform: capitalize;
}

.subfeature-section {
    padding-left: 16px;
    border-left: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    margin-bottom: 5px;
}

#layerlinkfield {
    min-width: 35%;
    color: rgba(0, 0, 0, 0.42);
    #layerLink {
        cursor: pointer;
    }
    .mdc-line-ripple::before {
        background: none;
        background-image: linear-gradient(to right, rgba(0, 0, 0, 0.42) 0, rgba(0, 0, 0, 0.42) 33%, transparent 0);
        background-size: 4px 1px;
        background-repeat: repeat-x;
        @include adaptive-color-dark-only('background', none);
        @include adaptive-color-dark-only('border-bottom', white dotted 2px);
    }
}

.layer-links {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.safari-warning {
    text-align: center;
    h3 {
        color: red;
    }
}

.version-warning {
    text-align: center;
    a {
        cursor: pointer;
        color: blue;
        text-decoration: underline;
    }
}

.cdk-overlay-backdrop-showing {
    z-index: unset;
}
